<template>
    <div>
    <span style="display:inline-block;" v-for="(item, index) in alerts">&nbsp;&nbsp;&nbsp;&nbsp;{{item}}:<span style="display:inline-block;color:red">{{ alertss[index] }}</span>人</span>
    </div>
    <div>
    系统cpu利用率: <span style="color:blue">{{data2[0]}}</span>  &nbsp;&nbsp;&nbsp;&nbsp;系统内存利用率:<span style="color:blue">{{data2[1]}}</span>
    </div>
</template>
<script setup>
import { get,post } from '@/utils/request.js'
import {ElMessage} from 'element-plus'
import { ref,onMounted,onBeforeUnmount } from 'vue'
import moment from 'moment'

const alerts=ref([])
const alertss=ref([])
const data1=ref([])
const data2=ref([])
const t=ref('')

onMounted(async () => {
   init();
   t.value=setInterval(function(){
get('/data/sys',(message)=>{
     data1.value=Object.keys(message)
     data2.value=Object.values(message)
})},1000)
})

onBeforeUnmount(() => {
  clearInterval(t.value)
});



const init=()=>{
 get('/data/alls',(message)=>{
     alerts.value=Object.keys(message)
     alertss.value=Object.values(message)
})
}
</script>
<style scoped>
</style>